<template>
  <div class="about">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="search">
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="username" label="" placeholder="请输入商家或美食名称"
          :rules="[{ required: true, message: '' }]" />
        <van-button size="small" type="primary" color="rgb(49,144,232)">提交</van-button>
      </van-form>
    </div>
    <p>搜索历史</p>
    <aboutshopsearch :shop="shops"></aboutshopsearch>
    <div class="history" v-show="flag">
      <div v-for="(item,index) in food" :key="index" @click="clickAc(item.content)">
        <p>{{item.content}}</p>
      </div>
      <p class="clear" @click="clear">清空搜索历史</p>
      <p v-if="!food">暂无搜索结果</p>
    </div>
    <TabBar :tabBars="tabBars"></TabBar>
  </div>
</template>
<script>
  import Nav from "@/components/Nav.vue";
  import TabBar from "@/components/TabBar.vue";
  import aboutshopsearch from "@/components/aboutshopsearch.vue"
  export default {
    name: "About",
    data() {
      return {
        username: '',
        left_show: false,
        left_name: '空',
        title_name: '搜索',
        right_name: '',
        flag: true,
        shops: [],
        food: JSON.parse(localStorage.getItem("arr3")),
        tabBars: [
          { className: "icon-changyonglogo40", title: "外卖", path: { name: 'Swiper', query: { latitude: localStorage.getItem("latitude"), longitude: localStorage.getItem("longitude") } } },
          { className: "icon-faxian1", title: "搜索", path: { name: 'About' } },
          { className: "icon-weibiaoti-", title: "订单", path: { name: 'Menu' } },
          { className: "icon-wode", title: "我的", path: { name: "Mine" } },
        ],
      }
    },
    components: {
      aboutshopsearch, Nav,
      TabBar,
    },
    created() {
      if (JSON.parse(localStorage.getItem("arr3"))) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    methods: {
      onSubmit() {
        this.flag = false;
        let content = this.username;
        let jing = localStorage.getItem('latitude')
        let wei = localStorage.getItem('longitude')
        this.axios.get("https://elm.cangdu.org/v4/restaurants?geohash=" + jing + "," + wei + "&keyword=" + content).then(((res) => {
          this.shops = res.data;
        })).catch((err) => {
          console.log(err)
        })
        this.rest.push({ content });
        this.$store.commit('rest', this.rest);
        localStorage.setItem("arr3", JSON.stringify(this.rest));
      },
      clear() {
        localStorage.removeItem("arr3");
        this.flag = false;
      },
      clickAc(item) {
        this.username = item;
      }
    },
    computed: {
      rest() {
        return this.$store.state.nav.rest;
      }
    },
  }
</script>
<style lang="less" scoped>
  .about {
    margin-top: 44px;
  }

  .search {
    background-color: white;
    padding: 10px;
    height: 35px;
  }

  .van-field {
    width: 78%;
    float: left;
    background-color: rgb(242, 242, 242);
    margin-right: 5px;
    height: 35px;
    line-height: 20px;
  }

  .van-button {
    width: 20%;
    float: right;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
  }

  p {
    padding: 13px;
    font-size: 15px;
  }

  .history {
    width: 100%;
    background-color: white;
  }

  .clear {
    text-align: center;
    color: rgb(49, 144, 232);
    font-weight: 600;
    font-size: 16px;
  }
</style>